<template>
	<view class="result" :style="{'background-color': bgColor}">
		<block v-for="item in list" :key="item.id">
			<view 
				class="item"
				:class="whiteColor"
				:style="{'width': width + 'rpx', 'height': height + 'rpx', 'border-radius': height + 'rpx'}">
				<view class="text">{{item.name}}</view>
				<u-image
					class="image" 
					width="40rpx" 
					height="40rpx" 
					src="/static/icons/close_icon.png"
					@click="$emit('click', item)"></u-image>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		},
		whiteColor: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: ''
		},
		width: [String, Number],
		height: [String, Number]
	}
}
</script>

<style lang="scss" scoped>
.result {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 10rpx;
	background-color: #f5f5f5;
	.item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: $u-bg-white-color;
		margin-right: 20rpx;
		&.white-color {
			background-color: $u-btn-light-grey-bg-color;
		}
		.text {
			flex: 1;
			text-align: right;
		}
		.image {
			margin-right: 5rpx;
		}
	}
}
</style>
